
<template>


<div style="display: flex;flex-direction: row;">
    <div class="ORDER">
        <div style="width: 221px; height: 30px; margin-top: 6px; display: flex;flex-direction: row;"> 
            <div class="title">
            ORDER聚造
        </div>
        <img src="../assets/shangxian.png" class="titleIcon"/>
    </div>
       
       <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="transparent"
      text-color="#fff"
      :router="true"
      active-text-color="#ffd04b">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>首页管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/index/banners">轮播图管理</el-menu-item>
          <el-menu-item index="/index/category">分类区管理</el-menu-item>
          <el-menu-item index="/index/recommend">为你推荐管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>商品管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/index/fenlei">分类管理</el-menu-item>
          <el-menu-item index="/index/brand">品牌管理</el-menu-item>
          <el-menu-item index="/index/goods">商品管理</el-menu-item>
          <el-menu-item index="/index/sku">单品管理</el-menu-item>

        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>商城管理</span>        
        </template>
        <el-menu-item index="/index/news">新闻管理</el-menu-item>
                <el-menu-item index="/index/user">用户管理</el-menu-item>
                <el-menu-item index="/index/examle">练习</el-menu-item>

      </el-submenu>
      
    </el-menu>   
        </div>
    <div>        
      <div ref="main4" style="width:100%;height:20px;background-color: #EFF6FC;padding-left:270px;"></div>
    <div class="backImg2">
        <div class="FLEX">                  

            <div class="userContent">


                <!-- <div  class="head">
   
                 <template slot-scope="scope">
        <img style="max-width:50px;max-height:50px;" v-if="scope.row.img" :src="scope.row.img" />
        </template></div>   -->
        <el-tooltip placement="bottom">
                  <div slot="content" @click="dialogFormVisible2=true" class="cursor">修改头像</div>
                 <span class="head"> </span>
     


            
                </el-tooltip>
               

                <el-tooltip placement="bottom">
                  <div slot="content" @click="dialogFormVisible=true" class="cursor">修改密码</div>
                 <span class="userText" style="color:#EAB924">{{nickName}}</span>
                </el-tooltip>
               
                <div class="userText" style="color:#2C2C2C">,你好</div>
                <el-button type="danger" round @click="logout" class="out"><el class="outText">退出</el></el-button>

            </div>    
 
            </div>               
            <router-view></router-view>
     
            </div>    
    

    </div>

  <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="400px">
    <el-form :model="form" ref="form" :rules="rules" label-width="100px">
      <el-form-item label="原密码" prop="passWord">
        <el-input type="password" v-model="form.passWord"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassWord">
        <el-input type="password" v-model="form.newPassWord"></el-input>
      </el-form-item>
       <el-form-item label="确认新密码" prop="reNewPassWord">
        <el-input type="password" v-model="form.reNewPassWord"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取消</el-button>
      <el-button type="primary" @click="changePassWord">确定</el-button>
    </div>
  </el-dialog>

    <el-dialog title="修改头像" :visible.sync="dialogFormVisible2" width="400px">
          <el-form :model="form" ref="form" :rules="rules" label-width="100px">
      <el-form-item label="图片" prop="photo">     
  <div @click="openFile" style="overflow:hidden;width:100px;height:100px;font-size:32px;border:1px dashed #ccc;text-align:center;line-height:100px;">
           <img style="max-width:100%;max-height:100%;" v-if="form.photo" :src="form.photo"/>
           <span v-else>+</span></div>
        <input ref="file" style="display:none;" multiple accept="image/*" type="file" @change="changeFile" />
      </el-form-item>
          </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible2 = false">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </div>
  </el-dialog>

</div>



</template>
<script>
import * as echarts from 'echarts';
import md5 from 'js-md5'
import api from '@/api'
export default {
  name: 'index',
  data () {
    return {
      radio: '1',
        value1: '',
        //日期
        
        nickName:"",
        dialogFormVisible:false,
                dialogFormVisible2:false,
        avatarUrl:"",
        form:{
          passWord:'',
          newPassWord:'',
          reNewPassWord:'',
          photo:"",

        },
      rows:[],
      rules:{
        passWord:[
          { required: true, message: '请输入原密码', trigger: 'blur' }
          ],
          newPassWord:[
          { required: true, message: '请输入新密码', trigger: 'blur' }
          ],
          reNewPassWord:[
          { required: true, message: '请重复输入新密码', trigger: 'blur' },
          { validator: (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.form.newPassWord) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
          }, trigger:'blur'}
          ]
          }
      };    
  },
   methods: {
           drawEchart4(){
      var myChart4 = echarts.init(this.$refs.main4);
     myChart4.setOption({
       graphic: {
    elements: [
      {
        type: 'text',
        left: 'center',
        top: 'center',
        style: {
          text: '欢迎光临━(*｀∀´*)ノ亻!',
          fontSize: 20,
          fontWeight: 'bold',
          lineDash: [0, 200],
          lineDashOffset: 0,
          fill: 'transparent',
          stroke: '#000',
          lineWidth: 1
        },
        keyframeAnimation: {
          duration: 3000,
          loop: true,
          keyframes: [
            {
              percent: 0.7,
              style: {
                fill: 'transparent',
                lineDashOffset: 300,
                lineDash: [300, 0]
              }
            },
            {
              // Stop for a while.
              percent: 0.8,
              style: {
                fill: 'transparent'
              }
            },
            {
              percent: 1,
              style: {
                fill: 'black'
              }
            }
          ]
        }
      }
    ]
  }
     })},
      //退出页面
      logout(){
        this.$confirm("是否退出登录?", "提示", {
          confirmButtonText:"确定",
          cancelButtonText:"取消",
          type:"warning",
        }).then(() => {
          this.$http({
            url:"/admin/logout"
          }).then((res) => {
            if (res.errorMsg){
              this.$message.error(res.errorMsg);
            } else{
              localStorage.removeItem('token')
              localStorage.removeItem('user')
              location.href = "#/login";
            }
          })
        })
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      changePassWord(){
        this.$refs.form.validate((valid) => {
          if(valid){
            this.$http({
              url:'/admin/changePassWord',
              method:'POST',
              data:{
                passWord:md5(this.form.passWord),
                newPassWord:md5(this.form.newPassWord)
              }
            }).then(res => {
              if(!res.errorMsg){
                this.$message({
                  message:'修改密码成功',
                  type:'success',
                  duration:3000
                });
                setTimeout(() => {
                  location.href = '#/login'
                })
             
              }
            })
          } else{
            return false;
          }
        })
      },
        changeFile(e){
      let files = e.target.files
      let formData = new FormData()
      formData.append('file',files[0])

      this.$http({
        url:'/upload',
        method:'POST',
        data:formData
      }).then(res => {
          console.log(res.path)
          var path = res.path.split("\\");
          path = path[0] + "/" + path[1];
           console.log(path)
        if(path) this.form.photo = api.baseURL +'/'+ path
      })

      
    },
    openFile(){
      let fileElement =  this.$refs.file
      fileElement.click()
    },
     submit(){
      this.$refs.form.validate(valid => {
          if(valid){
        this.form.indexId = this.form._id
        this.$http({
        url:'/admin/index',
        method:this.form.indexId ? 'PUT' : 'POST',//通过
        data:this.form
      }).then(res => {
        if(!res.errMsg){
          this.dialogFormVisible2 = false
          this.$emit('load',this.form.indexId ? undefined : 1)
        }
      })
          }
      })
     
    }
  },

  created(){
    let user = localStorage.getItem("user");
   
    if(!user){
      location.href = location.origin + '#/login'
    }else{
      user = JSON.parse(user);
      // this.photo = user.avatarUrl || require("../assets/a1.png");
      this.nickName = user.nickName || "小王";
     }
     
  },

  mounted(){
  this.drawEchart4()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,body{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold;
}
@media screen and ( max-width: 1440px){
}

</style>
